<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<%@include file="/views/common/include/taglib.jsp"%>
	<%@include file="/views/common/include/head.jsp"%>
	<title>D 生活</title>
	<link rel="stylesheet" href="${ctx}/css/page/header2.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/reset.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/jifen.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/shangchennav.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/page.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/footer.css" type="text/css">
	<style type="text/css">
	/* .page ul .active input{
    background-color: #28c7c9;
    color:#fff;
    cursor: pointer;
    }
	.page ul li input:HOVER{
    background-color: #28c7c9;
     cursor: pointer;
	}
	.page ul li:HOVER{
    background-color: #28c7c9;
     cursor: pointer;
	} */
	.rule{border-radius:5px;}
    .rule .layui-layer-title{height:50px;background:#7ECFE0;line-height:50px;color:#fff;font-size:20px;text-align:center;border-radius:5px 5px 0 0;}
    .rule .layui-layer-setwin .layui-layer-close1{width:25px;height:25px;}.rule .layui-layer-setwin{top:14px;}

	</style>
</head>
	<script type="text/javascript">
    var ctx = '${ctx}';
    var order = "${order}";
	function changeOrder(od){
		order = od;
		window.location.href = ctx +"/mallIntegral?pNo=1"+ "&order=" + order ;
	}
	
	function gotoPage(page){
		
		var pages = $("#pages").val();
		var order = $("#order").val();
    	if(page == null || page == 'undefined'){
    		page = this.page;
    	}
    	if(page < 1 ){
    		layer.msg("已到达第一页!", {
				time : 2000
			// 2秒关闭（如果不配置，默认是3秒）
			});
    	} else if(page > pages){
    		layer.msg("已到达最后一页!", {
				time : 1000
			// 2秒关闭（如果不配置，默认是3秒）
			});
    	} else {
    		window.location.href = ctx +"/mallIntegral?pNo=" + page +"&order=" + 1 ;
    	}
	}
	
	function findIntegral(findIntegral,min,max){
		
		window.location.href = ctx +"/mallIntegral?pNo=1"+ "&order=" + 1+ "&findIntegral=" + findIntegral+ "&min=" + min+ "&max=" + max ;
	}
	
	function showRules(){
			msg = "积分兑换规则";
			url = ctx + "/integralRules" ;
			index = layer.open({
			      type: 2,
 			      skin: 'rule',
			      title: msg,
			      fix: false,
			      shadeClose: true,
			      scrollbar: false,
			      maxmin: false,
			      edit: true,
			      closeBtn: 1,
			      area: ['620px', '520px'],
			      content: url
				});
		}
	
	function searchGoodsOrShops(){
		var selectType = $("#selectType").val();
		var name = $("#name").val();
		window.location.href = ctx +"/searchGoodsOrShops?pNo=1" + "&selectType=" +selectType +"&name=" + name;
	}
</script>
<body>
    <jsp:include page="/views/common/head_main.jsp" />

	<div class="bg">
		<div class="contentbox1 contentbox">
		<input type="hidden" id="item" value="${sessionScope.item_mall}"/>
			<div class="nav">
				 <ul>
                    <li><a href="${ctx}/main?item=4">商城首页</a></li><span>|</span>
                    <li><a href="${ctx}/mallSeckill">秒杀专区</a></li><span>|</span>
                    <li><a href="${ctx}/main?item=4#article">精品推荐</a></li><span>|</span>
                    <li><a href="${ctx}/main?item=4#hotshop">热门商铺</a></li><span>|</span>
                    <li><a style="color:#D4195D;" href="${ctx}/mallIntegral">积分专区</a></li>
                </ul>
				<div class="seabox">
					<select class="searchhh" id="selectType">
					<option value="1">商品</option>
					<option value="2">店铺</option>
					</select>
					<input class="search" type="text" id="name"></input><button class="searchbtn" onclick="searchGoodsOrShops()">搜索</button>
				</div>
				<div class="cartbox">
                	 <img src="${ctx}/images/mall/cart.png">&nbsp;&nbsp;&nbsp;<a href="${ctx}/shopcart/shopcartList" target="_blank">我的购物车</a>
                </div>
			</div>
		</div>
		<div class="contentbox2 contentbox">
			<img src="${ctx}/images/mall/integral/jf1.png">
		</div>
		<div class="contentbox3 contentbox">
			<div class="left-list">
				<div class="jifen">
						<div class="wd-jf">
							<div class="jf-title">
							<div class="pic" style="margin-left: 55px;">
									<img src="${ctx}/images/mall/integral/moneytag.png" style="margin-right: 10px;float: left;margin-top: 9px;"/>
							</div>
							我的积分
							</div>
							<div class="photo">
								<div class="pic">
									<img width="45" height="40" style="margin-left:5px;" src="${sessionScope.image_logo}${user.headimg}" />
								</div>
								<p class="per-num">${user.integral}</span>
								<div class="per-nummm" style="margin-right: 45px;" onclick="showRules()">
									<div style="margin-left: 55px;"><img src="${ctx}/images/mall/integral/duihuan.png" style="float:left;"/></div>兑换规则
			
								</div>
							</div>
						</div>
						<input id="integralCategories"  type="hidden" value="${integralCategories}">
						<c:forEach items="${integralCategories}" var="item" varStatus="status">
						<div class="jf-qu jf-color1" style="background-image: url('${sessionScope.image_logo}${item.logo }');">
						<a  onclick="findIntegral(6,${item.min },${item.max })">${item.min }~${item.max }积分区<span style="font-size:12px;float:right;padding-right:7px;">兑换 ››</span></a></div>
						</c:forEach>
					
				</div>
			
			</div>
			<div class="content">
				<div class="c-top">
					<div class="menu-list">
					<input id="order"  type="hidden" value="${order}">
						<ul>
					<%-- <li <c:if test="${order == 1}">class="first"</c:if>  onclick="changeOrder(1)" style="cursor: pointer;">综合</li> --%>
					<c:if test="${order != 4 && order != 5}">
					<li onclick="changeOrder(4)" style="cursor: pointer;margin-left:-1px;">积分值 <img src="${ctx}/images/mall/integral/jf6.png" /></li>
					</c:if>
					<c:if test="${order == 4}">
					<li <c:if test="${order == 4}">class="first"</c:if>  onclick="changeOrder(5)" style="cursor: pointer;margin-left:-1px;">积分值&#8593;
					 </li> 
					 </c:if>
					 <c:if test="${order == 5}">
					 <li <c:if test="${order == 5}">class="first"</c:if>  onclick="changeOrder(4)" style="cursor: pointer;margin-left:-1px;">积分值&#8595;
					 </li> 
					 </c:if>
					<c:if test="${order != 2 && order != 3}">
							<li onclick="changeOrder(2)" style="cursor: pointer;margin-left:-1px;">兑换量</li>
					</c:if>
					<c:if test="${order == 2}">
					<li <c:if test="${order == 2}">class="first"</c:if>  onclick="changeOrder(3)" style="cursor: pointer;margin-left:-1px;">兑换量&#8593; </li> 
					 </c:if>
					 <c:if test="${order == 3}">
					 <li <c:if test="${order == 3}">class="first"</c:if>  onclick="changeOrder(2)" style="cursor: pointer;margin-left:-1px;">兑换量&#8595;
					 </li> 
					 </c:if>
					
						</ul>
						<div class="blue-stick">
						</div>
					</div>
					<div class="jf-change">
						<div class="padd1">
						<c:forEach items="${integralGoods.list}" var="item" varStatus="status">
							    <div class="c-item">
							    <div class="pic-box">
							    	<a href="${ctx}/GoodsDetail?id=${item.id}&type=2" target="_blank"><img src="${sessionScope.image_logo}${item.logo}"></a>
							    </div>
							    <div class="c-info">
							    	<div>${item.name}</div>
							    	<div class="price-con">
									<p>所需积分：</p>
									<p><img src="${ctx}/images/mall/integral/aixin.png" style="height:12px;width:14px;vertical-align:-1px;"/>&nbsp;&nbsp;<span style="font-size:16px;">${item.integralNum}</span>&nbsp;&nbsp;积分</p>
								 <p><a style="text-decoration:line-through;">原价：￥${item.marketPrice}</a>
									<c:if test="${item.stock != 0}">
										<a href="${ctx}/GoodsDetail?id=${item.id}&type=2" target="_blank"><button class="change-btn2" style="cursor:pointer;">立即兑换</button></a>
									</c:if>
									<c:if test="${item.stock == 0}">
										<button class="change-btn2" style="background-color: #BFBFBF;color:#fff;border: 0">已抢光</button>
									</c:if>
								 
								 </p>
							    	</div>
								</div>
							</div>
							</c:forEach>
							</div>
						</div >
						<div class="page">
							<input id="pages" type="hidden" value="${integralGoods.pages}">
							<ul>
								<li><a class="last-page page-change " onclick="gotoPage(${currentPage-1 });">&lt;上一页</a></li>
								<c:if test="${integralGoods.firstPage > 1}">
									<li onclick="gotoPage(1);"
										class="page-num"><a>1</a></li>
									<c:if test="${integralGoods.firstPage > 2}">
		                       		...
		                       		</c:if>
								</c:if>
								<c:forEach items="${integralGoods.navigatepageNums }" var="page">
									<li onclick="gotoPage(${page });"
										class="<c:if test="${currentPage == page }">current</c:if>"
										class="page-num"><a>${page}</a></li>
								</c:forEach>
								<c:if test="${integralGoods.lastPage < integralGoods.pages}">
									<c:if test="${integralGoods.firstPage < integralGoods.pages - 1}">
		                       		...
		                       		</c:if>
									<li onclick="gotoPage(${integralGoods.pages});"
										class="page-num"><a>${integralGoods.pages}</a>
									</li>
								</c:if>
								<li><a class="next-page page-change" onclick="gotoPage(${currentPage+1 });">下一页&gt;</a></li>
							</ul>
						</div>
						
					
					</div>
				</div>
			</div>
		</div>
	<jsp:include page="/views/common/footer.jsp" />
	</body>
	</html>